// 由于 webpack 是基于 Node 进行构建的,所以 webpack 中，任何合法的 node 的代码都支持
const path = require('path');
/**
    在内存中，根据指定的模版页面，生成一份内存中的首页，同时自动把打包好的 bundle.js 注入到页面底部。
    如果需要配置插件，需要在导出的对象中，挂载一个 plugins 节点
 */
const htmlWebpackPlugin = require('html-webpack-plugin');
/**
 * vue 的插件
 参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required
 Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的,

 在webpack.config.js中加入
 */
const VueLoaderPlugin = require('vue-loader/lib/plugin');


/**
  当以命令的形式执行 webpack 或者 webpack-dev-server 的时候，工具会发现，我们并没有提供需要打包的
  的文件的入口和出口，它会检查项目根目录中的配置文件，并且读取这个文件，拿到这个配置对象，然后通过配置对象
  进行打包构建。
 */
module.exports = {
    mode: 'development',
    // 入口文件
    entry: path.join(__dirname, './src/main.js'),
    // 指定输出选项
    output: {
        path: path.join(__dirname, './digst'),// 输出路径
        filename: 'bundle.js' // 指定输出文件的名称
    },
    plugins: [
        // 所有webpack 插件的配置节点
        new htmlWebpackPlugin({
            template: path.join(__dirname, '/src/index.html'),// 指定模版文件路径
            filename: 'index.html'// 设置生成的内存页面的名称
        }),
        new VueLoaderPlugin()
    ],
    module: {
        // 配置所有第三方 loader 模块
        rules: [
            // 第三方模块的匹配规则
            // 处理 css 类型文件的 loader 
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            // 处理 less 类型文件的 loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            // 处理 scss 类型文件的 loader
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            /**
                处理 图片类型文件(路径)的 loader
                如果想大图不转为data，可以附带参数，跟平时的url传参一致。
                如：url-loader?limit=7631&name=[name].[ext]
                (1)limit给定的值是图片的大小，单位 byte 。如果我们引用的图片，大于或者等于给定的limit，则不会转为
                base64格式的字符串。
                (2) [name].[ext]的作用是，让图片不被改名称和后缀名。使用原来的图片名称和后缀名,但是这样做，同名图片会在被复制
                到根目录的时候被覆盖。
                (3) 解决方法,加个hash值，改为：name=[hash:8]-[name].[ext]
             */
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' },
            // 处理字体文件的 loader
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            // 配置 babel 来转换高级的 ES 语法。 
            { test: /\.js/, use: 'babel-loader', exclude: /node_modules/ },
            // 配置处理 .vue 类型的文件的 loader
            { test: /\.vue$/, use: 'vue-loader' }
        ]
    }
};